<template>
    <div>
        <h1>全局定时器管理</h1>
        <p>全局可用，无需定义，作为setTimeout和setInterval的替代使用，核心也是使用其实现，实现更好的定时器销毁控制</p>

        <h3>on-每秒执行（setInterval）</h3>
        <h3>once-延迟执行（setTimeout）</h3>
        <h3>un-销毁指定或多个定时器</h3>
        <h3>clear-清理所有定时器</h3>
        <dCode :code="conf.str" />


        <h3>单独创建对象进行管理？</h3>
        <div>使用TimerBean ,可用方法和全局一致</div>
        <dCode :code="conf.str1" />
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

const conf =reactive({
    str:`const tid  = Timer.on(()=>{
    console.log('每3秒执行一次');
},3000)
const tid1 = Timer.once(()=>{
    console.log('4秒后执行一次');
},4000)
Timer.un(tid,tid1)//销毁上面使用的两个定时器
Timer.clear()//清空所有定时器
`  ,
    str1:`const timer = new TimerBean()
    const tid  = timer.on(()=>{
    console.log('每3秒执行一次');
},3000)
const tid1 = timer.once(()=>{
    console.log('4秒后执行一次');
},4000)
timer.un(tid,tid1)//销毁上面使用的两个定时器
timer.clear()//清空所有定时器
`  ,
})
</script>
<style lang="less" scoped></style>
